import { watch } from 'vue'
import store from '@/store'
import { THEME_LIGHT, THEME_DARK, THEME_SYSTEM } from '@/constants'

/**
 * 变更主题
 * @param {*} theme
 */
const changeTheme = (theme) => {
    // html 的 class
    let themeClassName = ''
    switch (theme) {
        case THEME_LIGHT:
            themeClassName = 'light' //这个light dark 时tailwindcss要求的值，不是自己设置的常量的值
            break
        case THEME_DARK:
            themeClassName = 'dark'
            break
        case THEME_SYSTEM:
            // 调用方法，监听系统主题变化
            watchSystemThemeChange()
            // 获取系统主题 matches 是一个boolean类型的值， true - 深色主题  false - 浅色主题
            themeClassName = matchMedia.matches ? 'dark' : 'light'
            break
    }
    //修改 html 的 class
    document.querySelector('html').className = themeClassName
}

// 监听系统主题变更
let matchMedia = ''
const watchSystemThemeChange = () => {
    //仅需一次初始化
    if (matchMedia) return
    matchMedia = window.matchMedia('(prefers-color-scheme: dark)')
    // 监听主题变化
    matchMedia.onchange = () => {
        changeTheme(THEME_SYSTEM)
    }
}
//初始化主题
export default () => {
    // 1、当主题发生改变时，或者当进入系统时，可以进行html class 的配置
    watch(() => store.getters.themeType, changeTheme, {
        //当watch初始化的时候执行一次
        immediate: true
    })
}
